<template>
    <div>
        <el-tabs v-model="activeDepartCustomer" @tab-click="departCustomerHandleClick">
            <el-tab-pane label="待分配离职员工" name="unAllocated">
                <panle title='离职继承' content="离职继承列表"></panle>
                <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                          v-loading="loading">
                    <el-table-column prop="handover_userid" label="离职员工"> </el-table-column>
                    <el-table-column prop="undistributed_num" label="待分配客户数"></el-table-column>
                    <el-table-column prop="owner_filter_num" label="待分配群聊数"></el-table-column>
                    <el-table-column prop="dimission_time" label="离职时间"></el-table-column>

                    <el-table-column prop="id" label="操作" v-if="isShow(['sys:role:allocation','sys:role:viewInfo'])">
                        <template slot-scope="scope">
                            <!--                    <PersButton type="text" size="mini" label="分配" icon="fa  fa-pencil" perms="sys:role:edit" @click="openAllocated(scope.row)"></PersButton>-->
                            <PersButton type="text" size="mini" icon="el-icon-s-data" perms="sys:role:del" label="查看详情" @click="viewData(scope.row)"></PersButton>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog :visible.sync="viewInfoOpen" width="900px" append-to-body title="查看详情" :before-close="handleViewInfoClose">
                    <panle :title="viewInfoYg.handover_userid" :content="viewInfoYg.dimission_time"></panle>
                    <el-tabs v-model="activeViewInfo" @tab-click="viewInfoHandleClick">
                        <el-tab-pane label="待分配客户" name="kehu">
                            <el-table :data="allocatedCustomertableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe
                                      v-loading="loading" @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column prop="external_userid" label="用户ID"></el-table-column>
                                <el-table-column prop="name" label="待分配客户"> </el-table-column>
                                <el-table-column  align="center"  header-align="center" prop="avatar" label="用户头像">
                                <template slot-scope="scope">
                                    <el-image :src="scope.row.avatar" fit="fill" style="width: 60px;height: 60px;"></el-image>
                                </template>
                                </el-table-column>
                                <el-table-column prop="handover_userid" v-if="false"></el-table-column>
                                <el-table-column label="操作" >
                                    <template slot-scope="scope">
                                        <PersButton type="text" size="mini" label="分配" icon="fa  fa-pencil" perms="sys:role:edit" @click="openAllocated(scope.row)"></PersButton>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div class="block">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
                                               :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper"
                                               :total="customerTotal">
                                </el-pagination>
                                <div>
                                    已选 {{allocated_customer_num}} 个客户

                                    <PersButton type="text" size="mini" label="分配" icon="fa  fa-pencil" @click="moreOpenAllocated(form)"></PersButton>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="待分配群聊" name="qunliao">配置管理</el-tab-pane>
                    </el-tabs>
                </el-dialog>
                <el-dialog :visible.sync="fenpeiOpen" width="900px" append-to-body title="分配" :before-close="handleFenpeiClose">
                    <panle title="分配客户" content="选择员工"></panle>
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="分配给员工：" prop="simpleList1">
                                    <el-select v-model="form.simpleList1" filterable placeholder="请选择" size="medium">
                                        <el-option
                                            v-for="item in simpleList"
                                            :key="item.userid"
                                            :label="item.name"
                                            :value="item.userid">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="待分配客户：" prop="allocated_customer">
                                    <el-tag v-for="item in form.allocated_customer" :key="item.external_userid">{{item.name}}</el-tag>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="transferCustomer('form')" size="small">确 定</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="已分配离职员工" name="allocated">
                <panle title='离职继承' content="已分配离职列表"></panle>
                <el-table :data="allocatedTableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                          v-loading="loading">
                    <el-table-column prop="handover_username" label="离职员工"> </el-table-column>
                    <el-table-column prop="undistributed_num" label="已分配客户数"></el-table-column>
                    <el-table-column prop="owner_filter_num" label="已分配群聊数"></el-table-column>
                    <el-table-column prop="dimission_time" label="离职时间"></el-table-column>

                    <el-table-column prop="id" label="操作" v-if="isShow(['sys:role:allocation','sys:role:viewInfo'])">
                        <template slot-scope="scope">
                            <!--                    <PersButton type="text" size="mini" label="分配" icon="fa  fa-pencil" perms="sys:role:edit" @click="openAllocated(scope.row)"></PersButton>-->
                            <PersButton type="text" size="mini" icon="el-icon-s-data" perms="sys:role:del" label="查看详情" @click="viewData(scope.row)"></PersButton>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
                           :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {VueEditor} from "vue2-editor";

let _self;
import Panle from '@/components/Panle.vue';
import PersButton from '@/components/PersButton.vue';
import {listRoles,addRoles,delRole,listRolesMenu,editRoles} from '@/api/system/role';
import {getMenuList} from '@/api/system/menu';
import { hasPermission,isShow } from '@/common/permission';
import {
    getUnassignedList,
    getUserInfo,
    getGroupchat,
    getExternalcontactList,
    getExternalcontactInfo, getSimplelist, transferCustomer,getMoreExternalcontactInfo,getTransferResult
} from "@/api/scrm/customer/inherit";
export default {
    components: {
        Panle,
        PersButton,
        VueEditor
    },
    data() {
        return {
            loading: false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数

            customerTotal:0,
            
            serachword: '',
            formInline: {},


            activeDepartCustomer:'unAllocated',

            tableData: [],
            viewInfoOpen: false,
            viewInfoYg:[
                'handover_userid',
                'dimission_time'
            ],
            activeViewInfo:'kehu',
            allocatedCustomertableData:[],
            simpleList:[],
            
            fenpeiOpen:false,
            externalcontactList:[],
            handoverUserid:'',
            allocated_customer_num:0,
            
            form: {
                simpleList1:[],
                allocated_customer: [],
            },

            allocatedTableData:[],
            
            rules: {
                title: [{
                    required: true,
                    message: "欢迎语名称不能为空",
                    trigger: "blur"
                }],
                
            },
            parentDate: [],
          
            checkKey: [],
            multipleSelection: [],
            checkedAll: false,
            checked: true,
            checkList: ['选中且禁用','复选框 A']
        }
    },
    created() {
        _self = this;
        _self.init();
    },
    methods: {
        hasPermission,
        isShow,
        init: function() {
            _self.loading = true;
            getUnassignedList().then((res) => {
                if (res.code === 200) {
                    if(res.data.length !== 0){
                        res.data.list.forEach((item,index) => {
                            let param = {
                                "handover_userid":item.handover_userid
                            }
                            // //获取离职员工姓名
                            // getUserInfo(param).then((res) => {
                            //     this.$set(_self.tableData[index],'handover_username',res.data.name)
                            // })
                            //获取离职成员群数量
                            getGroupchat(param).then((res) => {
                                this.$set(_self.tableData[index],'owner_filter_num',res.data.length)
                            })
                        })
                        _self.tableData = res.data.list;
                        _self.total = res.data.total;
                    }
                    _self.loading = false;
                }
            });

            getTransferResult().then((res) => {
                if (res.code === 200) {
                    res.data.list.forEach((item,index) => {
                        let param = {
                            "handover_userid":item.handover_userid
                        }
                        //获取离职员工姓名
                        getUserInfo(param).then((res) => {
                            this.$set(_self.allocatedTableData[index],'handover_username',res.data.name)
                        })
                        //获取离职成员群数量
                        getGroupchat(param).then((res) => {
                            this.$set(_self.allocatedTableData[index],'owner_filter_num',res.data)
                        })
                    })

                    _self.allocatedTableData = res.data.list;
                    _self.total = res.data.total;
                    _self.loading = false;
                }
            });
            
        },
        
        handleSizeChange: function(e) {
          
            _self.pageSize = e;
            _self.init();
        },
        handleCurrentChange: function(e) {
          
            _self.pageNumber = e;
            _self.init();
        },
        submitForm:function(data){
            let trees=   _self.$refs.tree.getCheckedKeys().concat(_self.$refs.tree.getHalfCheckedKeys());
            _self.form.rules = trees;
            _self.$refs[data].validate((valid) => {
                if (valid) {
                    addRoles(_self.form).then((res)=>{
                     
                        if(res.code==200){
                            _self.msgSuccess(res.msg);
                            _self.init();
                            _self.open=false;
                        }else{
                            _self.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        viewData:function(data) {
            _self.viewInfoOpen = true;
            _self.viewInfoYg.handover_userid = "员工："+data.handover_userid
            _self.viewInfoYg.dimission_time = "离职时间："+data.dimission_time
            
            data.external_userid_list.forEach(function(item){
                let param = {
                    "external_userid":item
                }
                getExternalcontactInfo(param).then((res) => {
                    if(res.code === 200){
                        _self.customerTotal = data.external_userid_list.length;
                        res.data.handover_userid = data.handover_userid
                        _self.allocatedCustomertableData.push(res.data);
                    }
                })
            })
        },
        handleViewInfoClose(done) {
            done();
            _self.allocatedCustomertableData = [];
        },

        openAllocated:function (data){
            _self.fenpeiOpen = true;
            let param = {
                "department_id":1
            }
            getSimplelist(param).then((res)=>{
                if (res.code === 200) {
                    _self.simpleList = res.data;
                }
            });
            _self.handoverUserid = data.handover_userid
            _self.form.allocated_customer.push(data)
        },
        handleFenpeiClose(done) {
            done();
            _self.simpleList1 = [];
            _self.externalcontactList = [];
            _self.handoverUserid = '';
            _self.customerTotal = 0;
            _self.form.allocated_customer = [];
            _self.allocated_customer_num = 0;
        },
        transferCustomer(data){
            _self.$refs[data].validate((valid) => {
                    if (valid) {
                        console.log(_self.form)
                        transferCustomer(_self.form).then((res)=>{
                            if(res.code === 200){
                                _self.fenpeiOpen = false;
                                _self.viewInfoOpen = false;
                            }
                        })
                    }
            })
        },
        moreOpenAllocated:function (data){
            _self.fenpeiOpen = true;
            let param = {
                "department_id":1
            }
            getSimplelist(param).then((res)=>{
                if (res.code === 200) {
                    _self.simpleList = res.data;
                }
            });
            _self.handoverUserid = data.handover_userid
        },
        handleSelectionChange: function(e) {
            let selectChang = []
            for (let item of e) {
                selectChang.push(item)
            }
            _self.allocated_customer_num = selectChang.length;
            _self.form.allocated_customer = selectChang;
          
        },

        departCustomerHandleClick:function(tab, event){
            
        },
        viewInfoHandleClick:function(tab, event){
            
        },
        editRole:function(data){

            _self.form.role_id = data.role_id;
            listRolesMenu(data.role_id).then((res)=>{
                _self.checkKey = res.data;
                _self.handlechange(res.data);
            })
            let editForm ={
                "role_id":data.role_id,
                "role_name":data.role_name,
                "remarks":data.remarks,
                "status":data.status,
                "order_by":data.order_by,
            }
            Object.assign(_self.form,editForm);
            _self.open=true;
        },
        subEditForm:function(data){

            let trees = _self.$refs.tree.getCheckedKeys().concat(_self.$refs.tree.getHalfCheckedKeys());
            _self.form.rules = trees;
            _self.$refs[data].validate((valid) => {
                if (valid) {
                    editRoles(_self.form).then((res)=>{
                        if(res.code==200){
                            _self.msgSuccess(res.msg);
                            _self.init();
                            _self.open=false;

                        }else{
                            _self.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })

        },
    }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
    .el-form-item {
        margin-bottom: 0;
    }
}

.el-tree {
    max-height: 200px;
    overflow: auto;
    background: #f7f7f7;
}

.el-tree-node__label,
.el-textarea__inner {
    font-size: 12px;
}

.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
    float: left;
    width: 100px;
}

.el-checkbox__label {
    font-size: 12px !important;
}

.el-form-item__content .el-select{
    margin-top: 15px;
}

.el-table,
.el-table__header,
.el-table__body {
    width: 100% !important;
}

.el-form-item__label{
    width:115px !important;
    line-height: 70px !important;
}
.el-tag{
    margin-top: 20px;
}
</style>
